<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/jquery1.11.3.js"></script>
    <style>
        .lizi {
            background: violet
        }
    </style>

</head>

<body>
    <ul>
        <li class="fruit">苹果</li>
        <li class="fruit">橘子</li>
        <li>菠萝</li>
    </ul>

    <script>
        //  创建元素节点并追到到页面 $(html结构) 不包住也可以？ 链式追加
        //    append 可以HTML 元素 jQuery 对象 DOM 元素 如果子节点存在则先删除再追加，
        let text = '<li>葡萄</li>' //html
        let text1 = $('<li></li>').text('李子') //jq 文字也可以放在标签里面
        let newLi = document.createElement('li') //dom也可以加
        newLi.innerText = '香蕉'
        $('ul').append(text, text1, newLi)
        // 删除节点 remove()  删除自己和子子孙孙 方法返回值被删元素的引用。还能在使用
        $('ul li:eq(1)').remove().appendTo($('ul'))
        // clone（）克隆自己和所有的子孙后代 true /false是否克隆事件。默认不克隆事件
        // $('ul').append($('ul li:gt(1)').clone())
        // 替换节点
        // $('.apple').replaceWith('13') 
        // 包裹节点很有用
        // $('.fruit').wrap('<div></div>') //外包给匹配上的每个<li class="apple">苹果</li>外面包裹一层div
        // $('.fruit').wrapAll('<div></div>') //给所有匹配上的li外级包一个div
        $('.fruit').wrapInner('<div></div>') //里包 给每个匹配上的li的子内容包裹div结构







    </script>
</body>

</html>